<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/css/index.css">
    <title>Document</title>
</head>

<body>
<div class="box">
    <!-- <div class="menu"></div> -->
    <div class="content">
        <!-- <div class="head"></div> -->

        <div class="floor1-box">
            <div class="flex-1">
               

                <div class="floor1-each each-1">
                    <div class="text-box">
                        <div class="text-box-text">总用户</div>
                        <div class="number">0</div>
                        <div class="change">
                            比昨日+0
                            <img class="up-icon" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                        </div>
                    </div>
                    <div class="floor1-each-img-r">
                        <img src="__CDN__/assets/addons/tongcheng/image/user.png" alt="" />
                    </div>
                </div>
               
            </div>

            <div class="flex-2">
                 <div class="floor1-each each-2">
                    <div class="text-box">
                        <div class="text-box-text">总会员</div>
                        <div class="number">0</div>
                        <div class="change">
                            比昨日+0
                            <img class="up-icon" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                        </div>
                    </div>
                    <div class="floor1-each-img-r">
                        <img src="__CDN__/assets/addons/tongcheng/image/member.png" alt="" />
                    </div>
                </div>
                
                <div class="floor1-each each-3">
                    <div class="text-box">
                        <div class="text-box-text">总司机</div>
                        <div class="number">0</div>
                        <div class="change">
                            比昨日+0
                            <img class="up-icon" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                        </div>
                    </div>
                    <div class="floor1-each-img-r">
                        <img src="__CDN__/assets/addons/tongcheng/image/serve.png" alt="" />
                    </div>
                </div>
                <!--<div class="floor1-each each-4">-->
                <!--    <div class="text-box">-->
                <!--        <div class="text-box-text">总骑手</div>-->
                <!--        <div class="number">0</div>-->
                <!--        <div class="change">-->
                <!--            比昨日+0-->
                <!--            <img class="up-icon" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />-->
                <!--        </div>-->
                <!--    </div>-->
                <!--    <div class="floor1-each-img-r">-->
                <!--        <img src="__CDN__/assets/addons/tongcheng/image/serve.png" alt="" />-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </div>




        <div class="floor1-box">
            <div class="flex-1">
                <div class="box-1">
                    
                    <div class="sum">订单总金额（元）</div>
                    <div class="sum-money">0</div>
                    <div class="box1-change">
                        比昨日+0
                        <img class="box-1-change-img" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                    </div>
                    <div class="back">
                        
                        <div>
                            <div class="back-sum">总订单</div>
                        <div class="back-sum-money">0</div>
                        <div class="back-change">
                            比昨日+0
                            <img class="box-1-change-img" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                        </div>
                        </div>
                        <div style="padding-right: 24px;">
                            <div class="back-sum">总佣金（元）</div>
                        <div class="back-sum-money">0</div>
                        <div class="back-change">
                            比昨日+0
                            <img class="box-1-change-img" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                        </div>
                        </div>
                    </div>
                </div>

                <div class="box-2-1">
                    <div class="ico-img">
                        <img class="img-ico-img" src="__CDN__/assets/addons/tongcheng/image/recharge.png" alt="" />
                    </div>
                    <div class="box-2-back">
                        <div style="height: 1px"></div>
                        <div class="back-sum">总充值（元）</div>
                        <div class="back-sum-money">0</div>
                        <div class="back-change">
                            比昨日+0
                            <img class="back-change-img" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex-2">
                <div class="box-2-1">
                    <div class="ico-img">
                        <img class="img-ico-img" src="__CDN__/assets/addons/tongcheng/image/recharge.png" alt="" />
                    </div>
                    <div class="box-2-back">
                        <div style="height: 1px"></div>
                        <div class="back-sum">总提现（元）</div>
                        <div class="back-sum-money">0</div>
                        <div class="back-change">
                            比昨日+0
                            <img class="back-change-img" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                        </div>
                    </div>
                </div>

                <div class="newbox-3">
                    <div class="newbox-3-1">
                        <div class="newbox-3-1-text">
                            <div style="height: 8px"></div>
                            <div class="back-sum">总收入（元）</div>
                            <div class="back-sum-money">0</div>
                            <div class="back-change">
                                比昨日+0
                                <img class="back-change-img" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                            </div>

                        </div>
                        <div class="newbox-3-1-img">
                            <img class="newbox-3-1-img" src="__CDN__/assets/addons/tongcheng/image/Intersect2.png" alt="">
                        </div>
                    </div>
                    <!-- <div class="newbox-3-2"></div> -->
                    <div class="newbox-3-2">
                        <div class="newbox-3-1-text">
                            <div style="height: 8px"></div>
                            <div class="back-sum">总预约</div>
                            <div class="back-sum-money">0</div>
                            <div class="back-change">
                                比昨日+0
                                <img class="back-change-img" src="__CDN__/assets/addons/tongcheng/image/change-2.png" alt="" />
                            </div>

                        </div>
                        <!--<div class="newbox-3-1-img">-->
                        <!--    <img class="newbox-3-1-img" src="__CDN__/assets/addons/tongcheng/image/Intersect2.png" alt="">-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>


        <div class="floor1-box">
            <div class="flex-1">
                <div class="box-4">
                    <div class="box-4-1">
                        <div class="nav-tabs-custom charts-custom">
                                <!-- Tabs within a box -->
                                <div class="charts-box">
                                    <div class="line"></div>订单趋势
                                </div>
                                
                                <div class="tab-content no-padding">
                                    <!-- Morris chart - Sales -->
                                    <div class="chart tab-pane active" id="line-chart" style="position: relative; height: 230px;"></div>
                                    
                                </div>
                            </div>
                    </div>
                    <div class="box-4-2">
                        <div class="nav-tabs-custom charts-custom">
                                <!-- Tabs within a box -->
                                
                                <div class="charts-box">
                                    <div class="line"></div>用户趋势
                                </div>
                                <div class="tab-content no-padding">
                                    <!-- Morris chart - Sales -->
                                    <div class="chart tab-pane active" id="line-user-chart" style="position: relative; height: 230px;"></div>
                                    
                                </div>
                            </div>
                    </div>
                </div>

                <div class="newbox-5-1">
                    <div class="box-6-each single-1">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/tongcheng/image/single-1.png" alt="" />今日已服务
                        </div>
                        <div class="box-6-each-number">0</div>

                    </div>
                    <div class="box-6-each single-3">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/tongcheng/image/single-4.png" alt="" />今日待服务
                        </div>
                        <div class="box-6-each-number">0</div>

                    </div>
                    <div class="box-6-each single-5">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/tongcheng/image/single-6.png" alt="" />后日待服务
                        </div>
                        <div class="box-6-each-number">0</div>

                    </div>
                </div>
            </div>

            <div class="flex-2">
                <div class="newbox-5-1">
                    <div class="box-6-each single-2">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/tongcheng/image/single-2.png" alt="" />昨日已服务
                        </div>
                        <div class="box-6-each-number">0</div>

                    </div>
                    <div class="box-6-each single-4">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/tongcheng/image/single-3.png" alt="" />明日待服务
                        </div>
                        <div class="box-6-each-number">0</div>
                    </div>
                    <div class="box-6-each single-6">
                        <div class="box-6-each-title">
                            <img class="box-6-each-title-img" src="__CDN__/assets/addons/tongcheng/image/single-5.png" alt="" />售后订单
                        </div>
                        <div class="box-6-each-number">0</div>
                    </div>
                </div>

                <div class="box-5">
                    <div class="box-5-each">
                        <div class="box-5-text">
                            <div class="today">今日订单</div>
                            <div class="number-b">0</div>

                        </div>
                        <div class="box-5-img">
                            <img class="img-box-5-img" src="__CDN__/assets/addons/tongcheng/image/trend-1.png" alt="" />
                        </div>
                    </div>
                    <div class="box-5-each">
                        <div class="box-5-text">
                            <div class="today">今日用户</div>
                            <div class="number-b">0</div>

                        </div>
                        <div class="box-5-img">
                            <img class="img-box-5-img" src="__CDN__/assets/addons/tongcheng/image/trend-2.png" alt="" />
                        </div>
                    </div>
                    <div class="box-5-each">
                        <div class="box-5-text">
                            <div class="today">今日充值（元）</div>
                            <div class="number-b">0</div>
                        </div>
                        <div class="box-5-img">
                            <img class="img-box-5-img" src="__CDN__/assets/addons/tongcheng/image/trend-3.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--<div class="floor1-box" id="app">-->
            
        <!--    <div class="flex-1 flex-rank">-->
        <!--        <div class="box-7">-->
        <!--            <div class="box-3-head">-->
        <!--                <div class="title">-->
        <!--                    <span class="rod"></span> 司机服务排行-->
        <!--                </div>-->
        <!--                <div class="tags-box" id="list1">-->
        <!--                    <span class="tags-box-span" :class="{curtag1 : goodsType == 0}" style="border-radius: 6px 0px 0px 6px" @click="goodsChange(0)">日</span><span-->
        <!--                        class="tags-box-span"  :class="{curtag1 : goodsType == 1}" @click="goodsChange(1)">月</span class="tags-box-span"><span class="tags-box-span"  :class="{curtag1 : goodsType == 2}" @click="goodsChange(2)">年</span><span-->
        <!--                        class="tags-box-span"  :class="{curtag1 : goodsType == 3}" style="border-radius: 0px 6px 6px 0px" @click="goodsChange(3)">总</span>-->
        <!--                </div>-->
        <!--            </div>-->

        <!--            <div class="list-box">-->
                        
        <!--                <div class="title-box">-->
        <!--                    <div class="title-1">排名</div>-->
        <!--                    <div class="title-2">服务名称</div>-->
        <!--                    <div class="title-3">订单量</div>-->
        <!--                    <div class="title-4">价格</div>-->
        <!--                </div>-->

                       
        <!--            </div>-->
        <!--        </div>-->

        <!--        <div class="box-7">-->
        <!--            <div class="box-3-head">-->
        <!--                <div class="title">-->
        <!--                    <span class="rod"></span> 骑手订单排行-->
        <!--                </div>-->
        <!--                <div class="tags-box" id="list2">-->
        <!--                    <span class="tags-box-span" :class="{curtag1 : cityType == 0}"  @click="cityChange(0)" style="border-radius: 6px 0px 0px 6px">日</span><span-->
        <!--                        class="tags-box-span" :class="{curtag1 : cityType == 1}"  @click="cityChange(1)">月</span class="tags-box-span"><span class="tags-box-span" :class="{curtag1 : cityType == 2}"  @click="cityChange(2)">年</span><span-->
        <!--                        class="tags-box-span" style="border-radius: 0px 6px 6px 0px" :class="{curtag1 : cityType == 3}"  @click="cityChange(3)">总</span>-->
        <!--                </div>-->
        <!--            </div>-->

        <!--            <div class="list-box">-->
                        
        <!--                <div class="title-box">-->
        <!--                    <div class="title-1">排名</div>-->
        <!--                    <div class="title-2">服务名称</div>-->
        <!--                    <div class="title-3">订单量</div>-->
        <!--                    <div class="title-4">金额</div>-->
        <!--                </div>-->

        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->

        <!--    <div class="flex-2  flex-rank">-->
        <!--        <div class="box-7">-->
        <!--            <div class="box-3-head">-->
        <!--                <div class="title">-->
        <!--                    <span class="rod"></span>城市订单排行-->
        <!--                </div>-->
        <!--                <div class="tags-box" id="list3">-->
        <!--                    <span class="tags-box-span" :class="{curtag1 : shopType == 0}"  @click="shopChange(0)" style="border-radius: 6px 0px 0px 6px">日</span><span-->
        <!--                        class="tags-box-span" :class="{curtag1 : shopType == 1}"  @click="shopChange(1)">月</span class="tags-box-span">-->
        <!--                        <span class="tags-box-span" :class="{curtag1 : shopType == 2}"  @click="shopChange(2)">年</span>-->
        <!--                        <span class="tags-box-span" :class="{curtag1 : shopType == 3}"  @click="shopChange(3)" style="border-radius: 0px 6px 6px 0px">总</span>-->
        <!--                </div>-->
        <!--            </div>-->

        <!--            <div class="list-box">-->
                        
        <!--                <div class="title-box">-->
        <!--                    <div class="title-1">排名</div>-->
        <!--                    <div class="title-2">城市名</div>-->
        <!--                    <div class="title-3">订单量</div>-->
        <!--                    <div class="title-4">金额</div>-->
        <!--                </div>-->

                        
        <!--            </div>-->
        <!--        </div>-->

        <!--        <div class="box-7">-->
        <!--            <div class="box-3-head">-->
        <!--                <div class="title">-->
        <!--                    <span class="rod"></span> 会员排行-->
        <!--                </div>-->
        <!--                <div class="tags-box" id="list4">-->
        <!--                    <span class="tags-box-span" :class="{curtag1 : skillType == 0}"  @click="skillChange(0)" style="border-radius: 6px 0px 0px 6px">日</span>-->
        <!--                    <span class="tags-box-span" :class="{curtag1 : skillType == 1}"  @click="skillChange(1)">月</span class="tags-box-span">-->
        <!--                    <span class="tags-box-span" :class="{curtag1 : skillType == 2}"  @click="skillChange(2)">年</span>-->
        <!--                    <span class="tags-box-span" :class="{curtag1 : skillType == 3}"  @click="skillChange(3)" style="border-radius: 0px 6px 6px 0px">总</span>-->
        <!--                </div>-->
        <!--            </div>-->

        <!--            <div class="list-box">-->
                        
        <!--                <div class="title-box">-->
        <!--                    <div class="title-1">排名</div>-->
        <!--                    <div class="title-2">会员名</div>-->
        <!--                    <div class="title-3">订单量</div>-->
        <!--                    <div class="title-4">金额</div>-->
        <!--                </div>-->

                       
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</div>-->


    </div>
</div>
</body>

<script src="__CDN__/assets/addons/tongcheng/js/vue.min.js"></script>
<script type="text/javascript" charset="utf-8">
    let add = new Vue({
                el: '#app',
                data(){
                    return {
                        goodsType: 0,
                        cityType: 0,
                        shopType: 0,
                        skillType:0
                    }
                },
           
                
                methods:{
                    cityChange(type){
                        this.cityType = type
                    },
                    goodsChange(type){
                        this.goodsType = type
                    },
                    shopChange(type){
                        this.shopType = type
                    },
                    skillChange(type){
                        this.skillType = type
                    },
                }
            })
</script>

</html>